import { PartFigure } from './PartFigure';
import { Canvas, PPM } from './Canvas';

// wifi 图标
const iconPath = [
// 圆点
`M425.5744 771.41333333
a1.3504 1.3504 0 1 0 172.8512 0 
a1.3504 1.3504 0 1 0-172.8512 0
z` ,
// 圆弧1
`M512 512
c-83.21706667 0-157.0816 39.3216-204.5952 100.352l45.53386667 35.4304
c36.864-47.5136 94.27626667-78.0288 159.06133333-78.0288
s122.12906667 30.5152 159.19786667 78.0288l45.39733333-35.4304
C669.0816 551.3216 595.21706667 512 512 512
z` ,
// 圆弧2
`M512 339.08053333c-138.71786667 0-261.87093333 65.536-340.92373333 167.1168l45.4656 35.4304C285.0816 453.632 391.7824 396.6976 512 396.6976s226.85013333 56.9344 295.5264 144.93013333l45.39733333-35.4304C773.87093333 404.6848 650.71786667 339.08053333 512 339.08053333z` ,
// 圆弧3
`M512 166.16106667c-194.21866667 0-366.66026667 91.88693333-477.3888 234.0864l46.55786667 36.18133333C181.17973333 308.08746667 336.75946667 225.21173333 512 225.21173333c175.17226667 0 330.82026667 82.87573333 430.83093333 211.21706667l46.62613334-36.2496C878.592 257.97973333 706.21866667 166.16106667 512 166.16106667z` ,
]

const iconActiveColor = '#0FBC91'
const iconDeactiveColor = '#aaa'

import {conn} from "@beshell/conn-ts/Connection"
import { PartBase } from '../model/parts/PartBase';


export abstract class BeCoreFigure extends PartFigure {

    private statusIcon?: raphaeljs.Set

    constructor(public canvas: Canvas, public part: PartBase) {
        super(canvas, part)
        this.removable = false
    }

    protected title() {
        return this.part.title
    }

    protected createChild() {
        
        super.createChild()
        
        this.statusIcon = this.canvas.paper.set()
        if(!this.statusIcon) return

        this.statusIcon?.push(this.canvas.paper.path(iconPath[0]))
        this.statusIcon?.push(this.canvas.paper.path(iconPath[1]))
        this.statusIcon?.push(this.canvas.paper.path(iconPath[2]))
        this.statusIcon?.push(this.canvas.paper.path(iconPath[3]))


        this.statusIcon?.attr({
            fill: conn? iconActiveColor: iconDeactiveColor ,
            "stroke-width": 0
        })
        
        let bbox = this.statusIcon.getBBox()
        let sx = 0.015
        let sy = 0.015
        let [ox, oy] = this.statusIconPos(bbox.x*sx, bbox.y*sy)

        this.statusIcon?.forEach((ele: raphaeljs.Element)=>{
            let path = ele.attr("path")
            this.canvas.paper.eachPathCoords(path, (seg: number[], ix: number, iy: number)=>{
                if(ix!=null) {
                    seg[ix]*= sx 
                    seg[ix]+= ox
                }
                if(iy!=null) {
                    seg[iy]*= sy
                    seg[iy]+= oy
                }
            })
            ele.attr("path",path)
            
            this.allElements.push(ele)
        })

        this.part.on("connected", ()=>{
            this.statusIcon?.attr({ fill: iconActiveColor })
            stopAnim()
        })
        this.part.on(["disconnected", "error"], (error: any)=>{
            this.statusIcon?.attr({ fill: iconDeactiveColor })
            stopAnim()
        })
        
        let connectingAnimTimer: any = null
        this.part.on("connecting", ()=>{
            let step = 1
            connectingAnimTimer = setInterval(()=>{
                this.statusIcon?.attr({ fill: iconActiveColor })
                for(let i=step; i<4; i++) {
                    (this.statusIcon as any)[i].attr({ fill: iconDeactiveColor })
                }
                if( (++step) > 4 ) {
                    step = 1
                }
            }, 300)
        })
        let stopAnim = ()=> {
            if(connectingAnimTimer!=null) {
                clearInterval(connectingAnimTimer)
                connectingAnimTimer = null
            }
        }
    }

    protected abstract statusIconPos(w:number, h:number) : number[]


    public remove(){
        super.remove()
        this.statusIcon?.remove()
    }
}

export class BeCore16Figure extends BeCoreFigure {
    protected statusIconPos(w:number, h:number) {
        return [
            - w + 28*PPM ,
            - h - 2.5*PPM
        ]
    }
}

export class BeCore32Figure extends BeCoreFigure {
    protected statusIconPos(w:number, h:number) {
        return [
            - w + 60*PPM ,
            - h - 2.5*PPM
        ]
    }
}